<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>总结生命周期</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2 :style="{opacity}">欢迎学习 Vue</h2>
      <button @click="opacity=1">透明度设置为1</button>
      <button @click="stop">点我停止变化</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data() {
        return {
          opacity: 1,
        };
      },

      methods: {
        stop() {
          // 清除定时器 但通过修改data中的数据还可以继续触发页面的更新
          // clearInterval(this.timer);
          // 销毁vm  此时再修修改data中的数据页面将不会再更新
          this.$destroy();
        },
      },
      // Vue完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用mounted()函数
      // mounted()只会在初始时调用一次  mounted()为生命周期钩子中的一个
      mounted() {
        console.log("挂载完毕", this);
        // tips:将定时器挂在this(vm)对象上,就可以实现在其它地方进行调用
        this.timer = setInterval(() => {
          this.opacity <= 0 ? (this.opacity = 1) : (this.opacity -= 0.01);
          console.log(setInterval);
        }, 26);
      },

      // vm 销毁前调用beforeDestroy钩子
      beforeDestroy() {
        console.log("vm销毁前我要先关闭定时器");
        clearInterval(this.timer);
      },
    });
  </script>
</html>
